<template>
	<div>
		<div class="search-box">
			<img src="../../../static/lfl/back.png" @click="myimg" />
			<input type="search" placeholder="请输入小区或商圈名称" name="userkey" v-model="inputx" />
			<p @click="searchs">搜索</p>
		</div>
		<div class="search-state">
			<p>历史搜索</p>
			<p @click="clear">清除全部</p>
		</div>
		<div class="search-list">
			<p v-for="imte in HistoryLists" v-if="clears">{{imte}}</p>
		</div>
	</div>

</template>

<script>
	import {
		Search
	} from 'vant';
	export default {
		name: 'search',
		data() {
			return {
				value: '',
				inputx: '',
				HistoryList: [],
				HistoryLists: null,
				clears: true
			};
		},
		mounted: function() {
			this.HistoryLists = JSON.parse(localStorage.getItem("HistoryList"));
			//判读是否登陆了
			if (localStorage.getItem("nameid") == null || localStorage.getItem("nameid") == undefined || localStorage.getItem("nameid") == "") {
				this.$router.push({
					name: 'login'
				});
			} else {}
		},
		methods: {
			myimg() {
				this.$router.go(-1);
			},
			searchs() {
				this.inputx = this.inputx;
				this.SearchVal(this.inputx);
				var datax = {
					userval: this.inputx
				}
				var _this = this;
				this.axios.post(_this.ajaxUrl + '/api/Lideta/sellike', _this.qs.stringify(datax)).then(function(res) {
					_this.data = res.data;
					console.log(res.data);
					//js路由跳转并js传值
					_this.$router.push({
						name: 'searchpage',
						query: {
							userval:_this.inputx
						}
					})
				}).catch(function(err) {});
			},
			SearchVal(val) {
				val = val.trim(); // 清除空格
				if (this.HistoryList.length > 0) {
					// 有数据的话 判断
					if (this.HistoryList.indexOf(val) !== -1) {
						// 有相同的，先删除 再添加
						this.HistoryList.splice(this.HistoryList.indexOf(val), 1);
						this.HistoryList.unshift(val);
					} else {
						// 没有相同的 添加
						this.HistoryList.unshift(val);
					}
				} else {
					// 没有数据 添加
					this.HistoryList.unshift(val);
				}
				if (this.HistoryList.length > 10) {
					// 保留六个值
					this.HistoryList.pop();
				}
				localStorage.setItem('HistoryList', JSON.stringify(this.HistoryList));
			},
			clear() {
				localStorage.clear();
				this.clears = false;
			}
		}
	};
</script>

<style scoped="scoped">
	.search-box {
		width: 7rem;
		height: 1rem;
		margin: auto;
		border-bottom: 1px solid gainsboro;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.search-box > img {
		width: 0.27rem;
		height: 0.4rem;
	}
	
	.search-box > p {
		color: #007aff;
		font-size: 0.3rem;
	}
	
	.search-box > input {
		width: 4.5rem;
		height: 0.8rem;
		border: none;
	}
	
	.search-state {
		width: 7rem;
		height: 0.8rem;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 0.3rem;
		color: grey;
	}
	
	.search-list {
		width: 7rem;
		height: auto;
		margin: auto;
	}
	
	.search-list>p {
		width: 6.9rem;
		height: 0.6rem;
		margin: auto;
		font-size: 0.3rem;
		color: black;
		line-height: 0.6rem;
	}
</style>